<template>
  <div class="body">
    <div class="such1">
      <span class="span">
        <span class="suchtitleleft">商品名称</span>
        <el-input
          v-model="params.goodsName"
          placeholder="输入商品名称"
          style="width: 200px"
        />
      </span>
<!--      <span class="span">-->
<!--        <span class="suchtitleleft">商品编号</span>-->
<!--        <el-input-->
<!--          v-model="params.goodsCode"-->
<!--          placeholder="输入商品编号"-->
<!--          style="width: 200px"-->
<!--        />-->
<!--      </span>-->
      <!-- <span class="span">
        <span class="suchtitleleft">供货价</span>
        <el-input
          v-model="params.minMarkPrice"
          placeholder="最低价"
          style="width: 100px"
        />
        -
        <el-input
          v-model="params.maxMarkPrice"
          placeholder="最高价"
          style="width: 100px"
        />
      </span> -->
<!--      <span class="span">-->
<!--        <span class="suchtitleleft">商品状态</span>-->
<!--        <el-select v-model="params.status" placeholder="请选择状态">-->
<!--          <el-option-->
<!--            v-for="item in goodsState"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </span>-->
      <span class="span" style="float: left; width: 150px">
        <el-button type="primary" @click="queryShop">查询</el-button>
        <the-reset-btn
          :params="params"
          :initParams="$options.data().params"
          :afterReset="handleAfterReset"
        ></the-reset-btn>
      </span>

    </div>

    <div class="such1">
      <el-button type="primary" @click="batchSetIsEnabled(1)">上架</el-button>
      <el-button type="danger" @click="batchSetIsEnabled(0)">下架</el-button>
    </div>

    <el-table
      :data="list"
      style="
        width: 94%;
        margin-left: 20px;
        margin-bottom: 100px !important;
        top: 0px;
      "
      stripe
      border
      class="www"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      row-key="id"
      :tree-props="{ children: 'goodsList', hasChildren: 'hasChildren' }"
    >
      >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        label="商品名称"
        min-width="180"
        align="left"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="tasteNameValue"
        label="口味名称"
        min-width="80"
        :show-overflow-tooltip="true"
      />

      <el-table-column label="尼古丁含量" width="100" align="left">
        <template slot-scope="scope">
           {{ scope.row.nicotine +"%"}}
        </template>
      </el-table-column>

      <el-table-column label="口味甜度" width="100" align="left">
        <template slot-scope="scope">
          {{ scope.row.sweetNum }}
        </template>
      </el-table-column>

      <el-table-column label="口味凉度" width="100" align="left">
        <template slot-scope="scope">
          {{ scope.row.coolNum }}
        </template>
      </el-table-column>

      <el-table-column label="口味浓郁度" width="100" align="left">
        <template slot-scope="scope">
          {{ scope.row.richNum }}
        </template>
      </el-table-column>

      <el-table-column
        prop="salePrice"
        label="销售价"
        width="80"
        align="left"
      />

<!--  -->
<!--      <el-table-column-->
<!--        prop="status"-->
<!--        label="商品状态"-->
<!--        show-overflow-tooltip-->
<!--        width="80"-->
<!--        align="left"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <div v-if="scope.row.status">-->
<!--            {{-->
<!--              scope.row.status == "auditing"-->
<!--                ? "审核中"-->
<!--                : scope.row.status == "valid" && scope.row.isEnable == 1-->
<!--                ? "已上架"-->
<!--                : "已下架"-->
<!--            }}-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        align="center"
        prop="created_at"
        fixed="right"
        label="操作"
        min-width="280"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 'valid' && scope.row.isEnable == 0"
            type="primary"
            @click="setIsEnabled(scope.row, 1)"
            >上架</el-button
          >
          <el-button
            v-if="scope.row.status == 'valid' && scope.row.isEnable == 1"
            slot="reference"
            type="danger"
            @click="setIsEnabled(scope.row, 0)"
            >下架</el-button
          >
          <el-button @click="getGoodsDetails(scope.row.id)"
            >查看</el-button
          >
          <el-button
            type="primary"
            @click="editGoods(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <div ref="bottomBtn" class="bottomBtn">
        <slot />
      </div>
      <el-pagination
        class="pagination"
        :current-page="params.current"
        :page-sizes="[10, 20, 40, 60, 80]"
        :page-size="params.size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      title="烟弹商品详情"
      custom-class="detail-confirm"
      :visible.sync="dialogVisible"
      width="80%"
      center
      :before-close="handleClose"
    >
      <GoodsDetail v-if="dialogVisible" :goods-info="goodsInfo" />
    </el-dialog>

  </div>
</template>

<script>
import bottombtn from "../product/shoplistbottomBtn";
import GoodsDetail from "../../components/goods/GoodsDetail.vue";
import {
  queryGoodsList,
  queryGoodsDetail,
  setGoodsIsEnabled,
} from "../../services/goods.js";

export default {
  name: "yanDanProduct",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    bottombtn,
    GoodsDetail,
  },
  data() {
    return {
      list: [],
      params: {
        current: 1, // 页码
        size: 10, // 条数
        goodsName: "", // 商品名称
        goodsCode: "", // 商品名称
        supplierId: "5",
        minMarkPrice: "", // 最低价
        maxMarkPrice: "", // 最高价
        i1CategoryId: "", // 一级分类
        i2CategoryId: "", // 二级分类
        i3CategoryId: "", // 三级分类
        status: "", // 状态
      },
      total: 0, // 总条数
      dialogVisible: false,
      goodsInfo: {}, // 商品详情
      goodsState: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "auditing",
          label: "审核中",
        },
        {
          value: "1",
          label: "已上架",
        },
        {
          value: "0",
          label: "已下架",
        },
      ],
      // isShowGoodsClassification: true,
      selectedGoodsList: [], // 已选中商品列表
    };
  },
  created() {
    this.getGoodsList(); // 获取商品详情
  },
  methods: {
    // 获取商品详情
    async getGoodsDetails(id) {
      const res = await queryGoodsDetail({ id });
      if (res.code === 0) {
        this.goodsInfo = res.data;
      }
      this.dialogVisible = true;
      // console.log('跳详情之前 的 查询结果 ',this.goodsInfo)
    },

    // 获取商品列表
    async getGoodsList() {
      const res = await queryGoodsList(this.params);
      if (res.code === 0) {
        this.list = res.data.records;
        this.total = res.data.total;
      }
      return res
    },

    // 商品上下架接口
    async setGoodsIsEnabled(params) {
      const res = await setGoodsIsEnabled(params);
      if (res.code === 0) {
        this.getGoodsList();
        this.$message({
          message: "状态修改成功",
          type: "success",
        });
      }
    },
    // 商品批量上下架
    batchSetIsEnabled(type) {
      if (!this.selectedGoodsList.length) {
        return this.$message({
          type: "warning",
          message: "请选择商品后再操作!",
        });
      }

      let list;
      // 草稿状态的商品不能上架
      list = this.selectedGoodsList.filter((item) => item.status === "valid");
      if (!list.length) {
        return this.$message({
          type: "warning",
          message: "商品需重新审核后才能上架!",
        });
      }
      // 已上下架的商品不能重复操作
      list = list.filter((item) => item.isEnable !== type);
      if (!list.length) {
        return this.$message({
          type: "warning",
          message: `已${type === 1 ? "上架" : "下架"}商品不能重复${
            type === 1 ? "上架" : "下架"
          }!`,
        });
      }
      const productIds = list.map((item) => item.productId);
      this.setGoodsIsEnabled({
        isEnable: type,
        productIds: productIds,
      });
    },
    // 商品上下架
    setIsEnabled(row, type) {
      // type (1.上架; 0.下架; 3.撤回申请)
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let productId = row.productId;
          this.setGoodsIsEnabled({
            isEnable: type,
            productIds: [productId],
          });
        })
        .catch(() => {});
    },
    handleClose(done) {
      done();
    },
    // 查询商品
    queryShop() {
      this.params.current = 1;
      this.getGoodsList();
    },
    // 添加商品
    addButt() {
      // 清空本地缓存的表单数据
      sessionStorage.removeItem("goods_add_details");
      this.$router.push({
        name: "yanDanProductEdit",
      });
    },
    // 编辑商品
    editGoods(goodsId) {
      console.log('before leave11 route goodsIs is ',goodsId)
      this.$router.push({
        name: "yanDanGoodsEdit",
        query: {
          id: goodsId,
        },
      });
    },
    // 多选
    handleSelectionChange(val) {
      this.selectedGoodsList = val;
    },
    // 条数change
    handleSizeChange(val) {
      this.params.size = val;
      this.getGoodsList();
    },
    // 分页change
    handleCurrentChange(val) {
      this.params.current = val;
      this.getGoodsList();
    },
    // 商品分类
    // goodsClassification(val) {
    //   this.params.i1CategoryId = val[0] || 0;
    //   this.params.i2CategoryId = val[1] || 0;
    //   this.params.i3CategoryId = val[2] || 0;
    // },
    handleAfterReset() {
      this.isShowGoodsClassification = false;
      this.$nextTick(() => {
        this.isShowGoodsClassification = true;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  /deep/ .el-pager li {
    padding: 0 4px;
    font-size: 13px;
    min-width: 25px;
    height: 28px;
    font-weight: 400;
    line-height: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    margin-left: 10px;
  }
  /deep/ .el-pagination__total {
    margin-right: 0;
  }
  /deep/ .el-button + .el-button {
    margin-left: 0;
  }
  /deep/ .el-table th.is-leaf {
    font-size: 14px;
    height: 60px;
  }
  .shopName {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .bottomBtn {
    button {
      transform: scale(0.9);
    }
  }
  .pagination {
    position: fixed;
    right: 3%;
    z-index: 8;
    background: #fff;
    max-width: 50%;
    padding-top: 10px;
    bottom: 0;
    text-align: right;
    height: 50px;
  }
  .groupType {
    width: 94%;
    height: 30px;
    margin-left: 20px;
    background: #fff;
  }
  .groupType span {
    float: left;
    padding: 10px;
    height: 30px;
    line-height: 10px;
    border: 1px solid #000;
    margin-left: 4px;
  }
  .groupType img {
    float: left;
    width: 25px;
    height: 25px;
    margin-top: -7px;
  }
  .suchtitleleft {
    float: left;
    height: 100%;
    width: 60px;
    text-align: left;
    padding-right: 8px;
    margin-top: 10px;
    color: #333;
    font-size: 12px;
    // font-weight:500;
  }
  .suchtitleright {
    float: left;
    height: 100%;
    width: 77px;
    text-align: right;
    line-height: 2;
  }
  .such1 {
    float: left;
    width: 100%;
    height: auto;
    margin-left: 20px;
    min-width: 470px;
    margin-bottom: 10px;
    color: #333333;
    font-size: 14px;
    .input {
      width: 75px;
    }
    .input1 {
      width: 90px;
    }
    .span:first-child {
      // width: 900px;
    }
    .span {
      float: left;
      // width: 100%;
      width: 280px;
      // max-width: 600px;
      margin-top: 10px;
      margin-right: 20px;
      .cascader {
        width: 150px;
      }
    }
    .spanclass {
      float: left;
      min-width: 340px;
      // max-width: 300px;
      margin-top: 10px;
      margin-right: 20px;
    }
    .spanSelect {
      float: left;
      min-width: 280px;
      // max-width: 350px;
      margin-top: 10px;
      margin-right: 20px;
    }
    .selectDom {
      max-width: 100%;
      float: left;
    }
  }
  .such1 p {
    width: 100%;
    height: 40px;
    /* background: #eee; */
  }
  .oneSelect {
    float: left;
    width: 200px;
  }
  .goodsImg {
    width: 30px;
    height: 30px;
  }
  .img {
    width: 50px;
    height: 50px;
  }
  .oneSelect2 {
    width: 85px;
  }
  .bottom {
    width: 94%;
    background: #fff;
    height: 50px;
    z-index: 9;
    position: fixed;
    margin-left: 20px;
    bottom: 0px;
    .selectall {
      // width:60px;
      // height:24px;
      font-size: 13px;
      margin-top: 9px;
    }
  }
  .shopSelect {
    width: 94%;
    margin-left: 20px;
    height: 70px;
    line-height: 70px;
    b {
      float: left;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .www {
    /deep/ .el-switch__core {
      height: 24px;
      width: 60px !important;
      line-height: 24px;
      border-radius: 16px;
      // margin-left: -40px;
    }
    /deep/.el-switch__core:after {
      top: 3px;
    }
    /deep/.el-switch {
      height: 24px;
      line-height: 24px;
    }
    //    /deep/.el-switch__label {
    //       position: absolute;
    //       display: block;
    //       color: #fff;
    //     }
    // /deep/ .el-switch__core{
    //       width: 60px !important;
    //       height:24px !important;
    //       line-height: 24px;
    //       border-radius: 16px;
    //       // top:-1px;
    //     }
    // /deep/  .el-switch__label--left{
    //     position: relative;
    //     left: 60px;
    //     color: #fff;
    //     z-index: -1111;
    //   }
    // /deep/ .el-switch__label--right{
    //     position: relative;
    //     right: 60px;
    //     color: #fff;
    //     z-index: -1111;
    //   }
    // /deep/  .el-switch__label--right.is-active{
    //     z-index: 1;
    //     color: #fff !important;
    //   }
    // /deep/  .el-switch__label--left.is-active{
    //     z-index: 1;
    //     color: #eee!important;
    //   }
    //   /deep/ .el-switch__core:after{
    //     top:3px;
    //   }
    //   /deep/.el-switch__label *{
    //     width: 30px;
    //   }
  }
}
/deep/.demonstration {
  display: none;
}
/deep/.demonstrationCascader {
  width: 200px !important;
}
.input-with-select {
  width: 260px;
}
.top {
  padding: 10px 20px;
}
</style>
